<template>
  <div class="app-container">
    <el-button type="primary" @click="addOneSector1"
      ><i class="el-icon-circle-plus-outline"></i>创建组织</el-button
    ><br /><br />
    <el-table
      :data="tableData"
      style="width: 300%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column align="center" prop="id" label="部门编号" width="200">
      </el-table-column>
      <el-table-column
        align="center"
        prop="sector"
        label="部门名称"
        width="514"
      >
      </el-table-column>
      <el-table-column align="center" prop="sort" width="200" label="排序">
      </el-table-column>
      <el-table-column label="状态" sortable align="center" width="200">
        <template slot-scope="scope">
          <el-switch
            @change="stateChanged(scope.row)"
            v-model="scope.row.isDisable"
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200%" align="left">
        <template slot-scope="scope">
          <el-button type="text" @click="updatesector(scope.row)"
            >编辑</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.level !== 3"
            @click="addSector(scope.row)"
            >添加</el-button
          >
          <el-button
            type="text"
            v-if="scope.row.level == 3 || scope.row.level == 2"
            @click="removeSector(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加二级三级 -->
    <el-dialog
      ref="addSectorDialog"
      title="是否确定进行该操作"
      :visible.sync="addSectorDialogVisible"
      width="30%"
      :before-close="addSectorHandleClose"
    >
      <el-form :model="addSectorForm">
        <el-form-item label="部门名称" :label-width="formLabelWidth">
          <el-input
            v-model="addSectorForm.sector"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input v-model="addSectorForm.sort" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="增加位置" :label-width="formLabelWidth">
          <el-select v-model="addSectorForm.positions" placeholder="添加位置">
            <el-option label="同级" value="1"></el-option>
            <el-option label="子级" value="0"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addSectorClick">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加组织 -->
    <el-dialog
      ref="addSectorDialogName"
      title="添加"
      :visible.sync="addSectorDialogNameVisible"
      width="30%"
      :before-close="addSectorDialogNameClose"
    >
      <el-form :model="addSectorForm">
        <el-form-item label="*组织名称" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入"
            v-model="addSectorForm.sector"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序" :label-width="formLabelWidth">
          <el-input
            placeholder="请输入"
            v-model="addSectorForm.sort"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOneSector">确认添加</el-button>
      </span>
    </el-dialog>

    <!-- 删除 -->
    <el-dialog
      ref="removeSectorDialog"
      title="是否确定删除"
      :visible.sync="removeSectorDialogVisible"
      width="30%"
      :before-close="removeSectorHandleClose"
    >
      <el-input v-model="sector" :disabled="true" autocomplete="off"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="removeSectorDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="removeSectorClick">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog
      ref="updatesectorDialog"
      title="提示"
      :visible.sync="updatesectordialogVisible"
      width="30%"
      :before-close="updateSectorHandleClose"
    >
      <el-input v-model="sector" placeholder="组织名称"></el-input>
      <el-input v-model="sort" placeholder="排序"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatesectordialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateSectorName">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import sectorApi from "@/api/hr/sector";

export default {
  data() {
    //定义变量和初始值
    return {
      //添加
      addSectorDialogNameVisible: false,
      formLabelWidth: "120px",
      addSectorDialogVisible: false,
      currentSector: {},
      addSectorForm: {
        sector: "",
        sort: "1",
        parentId: 0,
        positions: "同级",
        isParent: true, //0表示子集，1表示同级
        level: 0,
      },

      //删除
      removeSectorDialogVisible: false,

      //修改
      sort: "",
      sector: "",
      id: "",
      ids: [],
      updatesectordialogVisible: false,
      tableData: [],
    };
  },
  created() {
    this.getAll();
  },

  methods: {
    //添加组织
    addSectorDialogNameClose() {
      this.addSectorDialogNameVisible = false;
    },

    addOneSector() {
      sectorApi.getOne().then((response) => {
        for (let i = 0; i < response.data.list.length; i++) {
          if (this.addSectorForm.sector === response.data.list[i].sector) {
            this.$message({
              message: "已有该组织！",
              type: "warning",
            });
            return;
          }
        }
        sectorApi.addSector(this.addSectorForm).then((res) => {
          if (res.data.flag == true) {
            this.$message({
              message: "恭喜你，添加成功",
              type: "success",
            });
          } else {
            this.$message.error();
            ("添加失败");
          }
          this.getAll();
        });
        this.addSectorDialogNameVisible = false;
      });
    },

    addOneSector1(row) {
      this.addSectorForm = {};
      this.addSectorDialogNameVisible = true;
      this.id = row.id;
      this.currentSector = row;
    },

    //添加
    addSectorClick() {
      let currlevele = this.currentSector.level;
      let targetLevle = this.currentSector.level;
      if (!"同级" == this.addSectorForm.positions) {
        targetLevle = currlevele + 1;
        this.addSectorForm.level = targetLevle;
        this.addSectorForm.level = currlevele;
        this.addSectorForm.parentId = this.currentSector.id;
      } else {
        this.addSectorForm.parentId = this.currentSector.parentId;
      }
      sectorApi.addSector(this.addSectorForm).then((res) => {
        if (res.data.flag == true) {
          this.$message({
            message: "恭喜你，添加成功",
            type: "success",
          });
        } else {
          this.$message.error();
          ("添加失败");
        }
        this.getAll();
      });
      this.addSectorDialogVisible = false;
    },
    addSector(row) {
      this.addSectorForm = {};
      this.addSectorDialogVisible = true;
      this.id = row.id;
      this.currentSector = row;
    },
    addSectorHandleClose() {
      this.addSectorDialogVisible = false;
    },

    //开关,x修改状态
    stateChanged(row) {
      this.getChildrensId(row);
      // return;
      sectorApi
        .updateSectorByIds(this.ids, row.isDisable == true ? 1 : 0)
        .then((res) => {
          if (res.data.flag == true) {
            this.$message({
              message: "恭喜你，状态修改成功",
              type: "success",
            });
          } else {
            this.$message.error();
            ("状态修改失败");
          }
          this.getAll();
        });
    },
    getChildrensId(row) {
      this.ids = [];
      if (row.level == 1) {
        this.ids.push(row.id);
        let twoSector = row.children;
        for (let i = 0; i < twoSector.length; i++) {
          this.ids.push(twoSector[i].id);
          let threeSector = twoSector[i].children;
          for (let m = 0; m < threeSector.length; m++) {
            this.ids.push(threeSector[m].id);
          }
        }
      }
      if (row.level == 2) {
        this.ids.push(row.id);
        let threeSector = row.children;
        for (let i = 0; i < threeSector.length; i++) {
          this.ids.push(threeSector[i].id);
        }
      }
      if (row.level == 3) {
        this.ids.push(row.id);
      }
      console.log(this.ids);
      console.log(1111111111111);
      console.log(row);
    },

    //删除
    removeSectorHandleClose() {
      this.removeSectorDialogVisible = false;
    },
    removeSectorClick() {
      sectorApi.delSectorByIds(this.ids).then((res) => {
        if (res.data.flag == true) {
          this.$message({
            message: "恭喜你，删除成功",
            type: "success",
          });
        } else {
          this.$message.error();
          ("删除失败");
        }

        this.removeSectorDialogVisible = false;
        this.getAll();
      });
    },
    removeSector(row) {
      this.getChildrensId(row);
      this.removeSectorDialogVisible = true;
      this.sector = row.sector;
      //this.id=row.id;
    },

    //修改
    updateSectorHandleClose() {
      this.updatesectordialogVisible = false;
    },
    updateSectorName() {
      sectorApi.updateSector(this.sector, this.id, this.sort).then((res) => {
        if (res.data.flag == true) {
          this.$message({
            message: "恭喜你，修改成功",
            type: "success",
          });
        } else {
          this.$message.error();
          ("修改失败");
        }
        this.updatesectordialogVisible = false;
        this.getAll();
      });
    },
    updatesector(row) {
      this.updatesectordialogVisible = true;
      console.log(row);
      this.sector = row.sector;
      this.sort = row.sort;
      this.id = row.id;
    },

    //获取全部数据
    getAll() {
      sectorApi.getAll().then((res) => {
        this.tableData = res.data.sectorLists;
      });
    },
  },
};
</script>
